<template>
  <div class="datastatistics">
    <div style="margin-top:12px">
    <el-radio v-model="radioDate" label="日" @change="reloadURL">按日期：</el-radio>
    <el-date-picker v-model="date" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" @change="reloadURL"></el-date-picker>
    <i style="margin-right: 15px"></i>
    <el-radio v-model="radioDate" label="月" @change="reloadURL">按月份：</el-radio>
    <el-date-picker v-model="month" type="month" placeholder="选择月" value-format="yyyy-MM" @change="reloadURL"></el-date-picker>
    <el-button
      style="position: absolute; right: 20px; top:-8px;"
      size="mini"
      type="primary"
      @click="requestFullScreen()"
      v-if="!isFull"
      >全屏</el-button
    >
    <el-button
      style="position: fixed; right: 3%;top:92%;z-index: 21;"
      size="mini"
      type="primary"
      @click="exitFullscreen()"
      v-else
      >退出全屏</el-button
    >
    </div>
    <iframe id="mainPicture" :class="isFull ? 'fixed' : 'mainPicture'" src></iframe>
  </div>
</template>

<script>

import MapStr from '@/main.js'
import { formatDate } from '@/common/js/date.js'
import { formatMonth } from '@/common/js/date.js'
export default {
  data () {
    return {
      isFull: false,
      dataCheckbox_SCV: [],
      date: '',
      month: '',
      radioDate: '日'
    }
  },
  mounted () {
    this.date = formatDate(new Date(new Date() - 3600 * 1000 * 24), 'yyyy-MM-dd')
    this.month = formatMonth(new Date, 'yyyy-MM')
    this.reloadURL()
  },
  methods: {
    async reloadURL () {
      //博德尔 替换项目需修改 可通用其他作业公司
      // var url = "http://111.160.78.62:9936/bde_linkWorkerCity.html?user=" + MapStr.userName + "&ClientNo=" + localStorage.getItem('CLIENT_NO') + '&date='
      var url = "http://111.160.78.62:4472/#/linkPage?linkIndex=bde_linkWorkerCity&userName=" + MapStr.userName + "&ClientNo=" + localStorage.getItem('CLIENT_NO') + '&date='
      
      if (this.radioDate === '日') {
        url += this.date
      }
      if (this.radioDate === '月') {
        url += this.month
      }
      console.log(url)
      document.getElementById('mainPicture').src = url
    },
    // 进入全屏
    requestFullScreen () {
      this.isFull = true;
      var de = document.documentElement;
      if (de.requestFullscreen) {
        de.requestFullscreen();
      } else if (de.mozRequestFullScreen) {
        de.mozRequestFullScreen();
      } else if (de.webkitRequestFullScreen) {
        de.webkitRequestFullScreen();
      }
    },
    // 退出全屏
    exitFullscreen () {
      this.isFull = false;
      var de = document;
      if (de.exitFullscreen) {
        de.exitFullscreen();
      } else if (de.mozCancelFullScreen) {
        de.mozCancelFullScreen();
      } else if (de.webkitCancelFullScreen) {
        de.webkitCancelFullScreen();
      }
    },
  }
}
</script>
<style scoped>
.content {
  overflow-y: hidden;
}
.fixed {
  z-index: 20;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
}
.datastatistics,
body {
  width: 100%;
  height: 100%;
  position: relative;
}
.demo-input-suffix {
  float: left;
  font-size: 15px;
  height: 32px;
  line-height: 32px;
}
.mainPicture {
  width: 100%;
  height: calc(100% + 5.469vw);
  border: 0px solid darkgrey;
  position: absolute;
  left: 0;
  top: 8.854vw;
  right: 0;
  bottom: 0;
  margin: auto;
}
</style>